<template>
  <page-container>
    <a-spin :spinning="spinning" tip="正在加载...">
      <a-card class="cardLine" size="small">
        <a-row :gutter="20">
          <a-col :span="5">
            流转单搜索：
            <a-input-search
              style="width: 60%"
              v-model:value="singleList.inputParams"
              @search="onEliminateChange"
              placeholder="输入流转单标题或ID"
            />
          </a-col>
          <a-col :span="8">
            推送类别：
            <a-select
              placeholder="选择推送类别"
              style="width: 35%; margin-right: 20px"
              @change="handleType"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code" v-for="item in typeList" :key="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-select
              v-model:value="category"
              placeholder="选择推送类别"
              style="width: 35%"
              @change="handleTypes"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code" v-for="item in oldTypeList" :key="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-col>
          <!-- <a-col :span="5">
            流转单ID：
            <a-input-search
              style="width: 60%"
              v-model:value="singleList.id"
              @search="onEliminateChange"
              placeholder="输入流转单ID"
            />
          </a-col> -->
          <a-col :span="6">
            <span style="width: 30%">下发时间：</span>
            <a-space style="width: 70%" direction="vertical">
              <!-- <a-range-picker @change="pickerChange" :format="dateFormat" /> -->
              <pickers @setTime="pickerChange" />
            </a-space>
          </a-col>
          <!-- <a-col :span="8">
            <span style="width: 30%">推送类别：</span>
            <a-checkbox-group
              style="width: 70%"
              v-model:value="singleList.types"
              :options="typeOptions"
              @change="onEliminateChange"
            />
          </a-col> -->
        </a-row>
        <div style="display: flex">
          <span style="min-width: 90px">&emsp;接收人员：</span>
          <a-checkbox-group
            style="margin-top: 15px"
            v-model:value="singleList.handleUnits"
            :options="valueOptions"
            @change="onEliminateChange"
          />
        </div>
        <div style="display: flex">
          <span style="min-width: 90px">&emsp;流转状态：</span>
          <a-checkbox-group
            style="margin-top: 15px"
            v-model:value="singleList.statuss"
            :options="stateOptions"
            @change="onEliminateChange"
          />
        </div>
      </a-card>
      <a-card style="margin-top: 20px" size="small">共 {{ totalCount }} 条流转单信息</a-card>
      <a-table
        size="small"
        :scroll="{ x: 1500 }"
        :pagination="pagination"
        :data-source="dataSource"
        :columns="columns"
      >
        <template #overtimeState="{ record }">
          <div
            v-if="record.handleEndTime"
            :style="{
              color:
                countDown(record.handleEndTime, record.finishTime).status == '未超时'
                  ? ''
                  : countDown(record.handleEndTime, record.finishTime).status == '倒计时'
                  ? '#D99B30'
                  : '#FF1B3F',
            }"
          >
            <div>
              {{ countDown(record.handleEndTime, record.finishTime).status }}
            </div>
            <div>
              {{ countDown(record.handleEndTime, record.finishTime).vueTime }}
            </div>
          </div>
        </template>
        <template #receive="{ record }">
          {{ record.handlePerson }}（{{ record.xqdwName }}）
        </template>
        <template #state="{ record }">
          <div style="display: flex">
            <div
              class="approved"
              :style="parseInt(record.status) <= 0 ? { color: '#FF1B3F' } : { color: '#1cdaff' }"
            >
              <div
                :style="
                  parseInt(record.status) <= 0
                    ? { border: '1px solid #FF1B3F' }
                    : { border: '1px solid #1cdaff' }
                "
                class="circular"
              >
                <div
                  :style="
                    parseInt(record.status) <= 0
                      ? { background: '#FF1B3F' }
                      : { background: '#1cdaff' }
                  "
                  class="circulars"
                ></div>
              </div>
              <div v-if="parseInt(record.status) <= 0">待审批</div>
              <div v-else>已审批</div>
            </div>
            <div
              :style="
                parseInt(record.status) <= 1
                  ? { borderTop: '1px solid #FF1B3F' }
                  : { borderTop: '1px solid #1cdaff' }
              "
              class="straightLine"
            ></div>

            <div
              class="approved"
              :style="parseInt(record.status) <= 1 ? { color: '#FF1B3F' } : { color: '#1cdaff' }"
            >
              <div
                :style="
                  parseInt(record.status) <= 1
                    ? { border: '1px solid #FF1B3F' }
                    : { border: '1px solid #1cdaff' }
                "
                class="circular"
              >
                <div
                  :style="
                    parseInt(record.status) <= 1
                      ? { background: '#FF1B3F' }
                      : { background: '#1cdaff' }
                  "
                  class="circulars"
                ></div>
              </div>
              <div v-if="parseInt(record.status) <= 1">待签收</div>
              <div v-else>已签收</div>
            </div>
            <div
              :style="
                parseInt(record.status) <= 2
                  ? { borderTop: '1px solid #FF1B3F' }
                  : { borderTop: '1px solid #1cdaff' }
              "
              class="straightLine"
            ></div>

            <div
              class="approved"
              :style="parseInt(record.status) <= 2 ? { color: '#FF1B3F' } : { color: '#1cdaff' }"
            >
              <div
                :style="
                  parseInt(record.status) <= 2
                    ? { border: '1px solid #FF1B3F' }
                    : { border: '1px solid #1cdaff' }
                "
                class="circular"
              >
                <div
                  :style="
                    parseInt(record.status) <= 2
                      ? { background: '#FF1B3F' }
                      : { background: '#1cdaff' }
                  "
                  class="circulars"
                ></div>
              </div>
              <div v-if="parseInt(record.status) <= 2">待反馈</div>
              <div v-else>已反馈</div>
            </div>
            <div
              :style="
                parseInt(record.status) <= 3
                  ? { borderTop: '1px solid #FF1B3F' }
                  : { borderTop: '1px solid #1cdaff' }
              "
              class="straightLine"
            ></div>

            <div
              class="approved"
              :style="parseInt(record.status) <= 3 ? { color: '#FF1B3F' } : { color: '#1cdaff' }"
            >
              <div
                :style="
                  parseInt(record.status) <= 3
                    ? { border: '1px solid #FF1B3F' }
                    : { border: '1px solid #1cdaff' }
                "
                class="circular"
              >
                <div
                  :style="
                    parseInt(record.status) <= 3
                      ? { background: '#FF1B3F' }
                      : { background: '#1cdaff' }
                  "
                  class="circulars"
                ></div>
              </div>
              <div v-if="parseInt(record.status) <= 3">待完成</div>
              <div v-else>已完成</div>
            </div>
          </div>
          <div style="display: flex; font-size: 12px">
            <div class="timeType">
              <span v-if="record.approveTime">{{ record.approveTime }}</span>
            </div>
            <div class="timeType">
              <span v-if="record.receivingTime">
                {{ record.receivingTime }}
              </span>
            </div>
            <div class="timeType">
              <span v-if="record.feedbackTime">
                {{ record.feedbackTime }}
              </span>
            </div>
            <div class="timeType">
              <span v-if="record.finishTime">
                {{ record.finishTime }}
              </span>
            </div>
          </div>
        </template>
        <template #action="{ record }">
          <a-space :size="size">
            <a-button size="small" type="primary" @click="handleDetaail(record)">详情</a-button>
            <a-button
              size="small"
              type="primary"
              @click="handleSp(record)"
              :disabled="record.status != '0'"
            >
              审批
            </a-button>
          </a-space>
        </template>
      </a-table>
      <a-pagination
        v-if="totalCount"
        style="text-align: center; margin-top: 20px"
        show-quick-jumper
        show-size-changer
        v-model:current="singleList.page"
        :pageSize="singleList.size"
        :total="totalCount"
        @change="onChange"
        @showSizeChange="onShowSizeChange"
        :pageSizeOptions="['10', '20', '30', '50']"
      />
    </a-spin>
  </page-container>
</template>

<script lang="ts">
import { useRouter } from 'vue-router';
import { defineComponent, ref, onActivated } from 'vue';
import { approveList, getQueryXqdwList, ProcessTypeTree } from '@/api/smart-tools/index';
import { columns, countDown } from '@/views/smart-tools/typing';
import pickers from '@/components/s-picker/picker.vue';
interface singleItem {
  page: number;
  size: number;
  inputParams?: string;
  callTimeStart?: string;
  callTimeEnd?: string;
  type?: any;
  handleUnits?: string[];
  statuss?: string[];
}

export default defineComponent({
  name: 'studyJudgeList',
  setup() {
    const singleList = ref<singleItem>({
      page: 1,
      size: 10,
      inputParams: '',
      callTimeStart: '',
      callTimeEnd: '',
      type: '',
      handleUnits: [],
      statuss: [],
    });
    const checkboxState = ref<string[]>([]);
    //推送类别
    const typeOptions = [
      { label: '案件回访', value: '1' },
      { label: '纠纷排查', value: '2' },
      { label: '案件防控', value: '3' },
    ];
    //接收单位
    const valueOptions = ref<any>([]);
    //流转状态
    const stateOptions = [
      { label: '待审批', value: '0' },
      { label: '待签收', value: '1' },
      { label: '待反馈', value: '2' },
      { label: '待完成', value: '3' },
      { label: '已完成', value: '4' },
    ];
    const dataSource = ref<any>([]);
    const totalCount = ref<number>();
    const size = ref<number>(20);
    const spinning = ref<boolean>(false);
    const pagination = ref<boolean>(false);
    const dateFormat = 'YYYY-MM-DD';
    let oldTypeList = ref<any>([]);

    //列表接口
    const singleInitiatorList = async () => {
      spinning.value = true;
      const res = await approveList(singleList.value);
      spinning.value = false;
      if (res.code === 200) {
        dataSource.value = res.data.details;
        totalCount.value = res.data.count;
      }
    };
    //辖区单位
    const queryXqdwList = async () => {
      const res = await getQueryXqdwList();
      if (res.code === 200) {
        valueOptions.value = [];
        res.data.forEach(item => {
          valueOptions.value.push({
            label:
              item.userName == null
                ? item.xqdwNameJc
                : item.userName + '（' + item.xqdwNameJc + '）',
            value: item.xqdwCode,
          });
        });
      }
    };

    //时间选择器
    const pickerChange = val => {
      singleList.value.page = 1;
      singleList.value.size = 10;
      singleList.value.callTimeStart = val[0] ? val[0] : '';
      singleList.value.callTimeEnd = val[1] ? val[1] : '';
      singleInitiatorList();
    };

    //条件查询
    const onEliminateChange = () => {
      singleList.value.page = 1;
      singleList.value.size = 10;
      singleInitiatorList();
    };

    //分页
    const onChange = async (pageNumber: number) => {
      singleList.value.page = pageNumber;
      singleInitiatorList();
    };
    const onShowSizeChange = (current: number, pageSize: number) => {
      singleList.value.page = 1;
      singleList.value.size = pageSize;
      singleInitiatorList();
    };

    const router = useRouter();
    const handelAdd = () => {
      router.push({
        path: '/single-initiator/add',
      });
    };
    const handleDetaail = record => {
      router.push({
        path: '/single-initiator/detail',
        query: {
          id: record.id,
        },
      });
    };
    const handleSp = record => {
      router.push({
        path: '/single-initiator/detail',
        query: {
          id: record.id,
          type: 'sp',
        },
      });
    };

    const category = ref();
    //推送类别
    const handleType = value => {
      if (value) {
        oldTypeList.value = [];
        category.value = null;
        singleList.value.type = value + ',';
        typeList.value.filter(item => {
          if (item.code == value) {
            oldTypeList.value = item.children;
          }
        });
      } else {
        oldTypeList.value = [];
        category.value = null;
        singleList.value.type = '';
      }
      onEliminateChange();
    };
    const handleTypes = value => {
      const newType = singleList.value.type.split(',')[0];
      if (newType) {
        singleList.value.type = newType + ',' + value;
      } else {
        singleList.value.type = '';
      }
      onEliminateChange();
    };
    const typeList = ref<any>([]);
    const handleProcessTypeTree = () => {
      ProcessTypeTree().then(res => {
        typeList.value = res.data;
      });
    };
    onActivated(() => {
      handleProcessTypeTree();
      singleInitiatorList();
      queryXqdwList();
      setInterval(() => {
        singleInitiatorList();
        queryXqdwList();
      }, 300000);
    });

    return {
      typeOptions,
      valueOptions,
      checkboxState,
      stateOptions,
      columns,
      dataSource,
      totalCount,
      singleList,
      spinning,
      dateFormat,
      size,
      typeList,
      oldTypeList,
      category,
      pagination,
      //方法
      handelAdd,
      handleDetaail,
      onChange,
      pickerChange,
      onShowSizeChange,
      onEliminateChange,
      handleSp,
      countDown,
      handleType,
      handleTypes,
    };
  },
  components: {
    pickers,
  },
});
</script>

<style lang="less" scoped>
.cardLine {
  line-height: 50px;
}

.straightLine {
  width: 30px;
  height: 0px;
  margin: 10px 10px;
}
.approved {
  display: flex;
  .circular {
    display: flex;
    align-items: center;
    width: 12px;
    height: 12px;
    margin: 4px 4px;
    border-radius: 50%;
    .circulars {
      width: 6px;
      height: 6px;
      margin: 0 auto;
      border-radius: 50%;
    }
  }
}
.timeType {
  width: 80px;
  margin: 0 16px;
}
</style>
